<!-- Bootstrap -->
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<main class="app-content" id="modulesDiv">
    <div class="app-title">
        <div>
            <h1>
                <i class="fa fa-th-list "></i>
                权限管理
            </h1>
            <p>在此页面进行权限管理</p>
        </div>
        <button href="javascript:void(0);" class="btn btn-primary" data-toggle="modal" data-target='#addModal'
                onclick="initModuleAdd()">
            新增
        </button>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item">
                <i class="fa fa-home fa-lg"></i>
            </li>
            <li class="breadcrumb-item">
                <a href="#">权限管理</a>
            </li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <table id="moduleTable" class="table table-striped table-bordered"
                           style="width:100%">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>描述</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <!-- resource add page & resource edit page !-->
    <div th:replace="account/resourceAdd"></div>
    <div th:replace="account/resourceEdit"></div>
    </div>
    <!-- /page content -->

    <!-- Datatables -->
    <script src="/vendors/datatables.net/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="/vendors/datatables.net-bs/js/dataTables.bootstrap4.js" type="text/javascript"></script>

    <script type="text/javascript">
        var modulesVue = new Vue({
            el: "#modulesDiv",
            data: {
                pageSize: 5,
                modulesTable: {},
                allRoles: [],
                resource: {
                    resourceId: "",
                    permission: "",
                    roles: [],
                },
            },
            methods: {
                RowData: function (id, resourceId, permission) {
                    var row = {};
                    row.id = id;
                    row.resourceId = resourceId;
                    row.permission = permission;
                    row.operate = function () {
                        return "<a href='#' class='btn_editcolor' data-toggle='modal' data-target='#editModal' " +
                            "onclick='initEditModal(\"" + resourceId + "\")'>编辑</a>&nbsp;" +
                            "<a href='javascript:void(0);' onclick='deleteModule(\"" + resourceId +
                            "\")' class='btn_editcolor'>删除</a>";
                    }
                    return row;
                },
                initTable: function (pageSize) {
                    var self = this;
                    self.modulesTable = $('#moduleTable').DataTable({
                        'paging': true,
                        "serverSide": true,
                        "pagingType": "full_numbers",
                        "pageLength": pageSize,
                        "processing": true,
                        "destroy": true,
                        'lengthChange': true,
                        'lengthMenu': [5, 10, 25, 50],
                        'searching': true,
                        'data-show-refresh': true,
                        'ordering': true,
                        'autoWidth': true,
                        "language": {
                            "paginate": {
                                "sNext": ">",
                                "sPrevious": "<",
                                "sFirst": "首页",
                                "sLast": "尾页",
                            },
                            "sLengthMenu": "显示 _MENU_ 项结果",
                            "sSearch": "搜索：",
                            "sProcessing": "搜索中",
                            "sLoadingRecords": "载入中...",
                            "sZeroRecords": "对不起，查询不到任何相关数据",
                            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录。",
                            "sInfoFiltered": "（数据库中共为 _MAX_ 条记录）",
                            "sInfoEmpty": "当前显示0到0条，共0条记录",
                        },
                        "ajax": function (data, callback, settings) {
                            // 从data获取查询数据
                            var columIndex = data.order[0].column;
                            var direction = data.order[0].dir;
                            var orderBy = data.columns[columIndex].name;
                            pageSize = data.length === undefined ? pageSize : data.length;

                            var searchBean = {};
                            searchBean.currentPage = (data.start / pageSize) + 1;
                            searchBean.pageSize = pageSize;
                            searchBean.orderBy = orderBy;
                            searchBean.direction = direction;
                            searchBean.keyword = data.search.value;

                            $.ajax({
                                url: "/api/resources",
                                type: "post",
                                contentType: "application/json",
                                data: JSON.stringify(searchBean),
                                success: function (rs) {
                                    // 定义表格数据结构
                                    var tableData = {
                                        draw: 0,
                                        recordsTotal: 0,
                                        recordsFiltered: 0,
                                        data: []
                                    };
                                    if (!rs) {
                                        layer.alert("请求出错，请稍后重试" + rs.message, {icon: 2});
                                        callback(tableData);
                                        return;
                                    }
                                    ;
                                    if (rs.list == null) {
                                        $('#moduleTable tbody tr').remove();
                                        $('#loading').remove();
                                        callback(tableData);
                                        return;
                                    }
                                    $('#loading').remove();
                                    var rowsData = [];
                                    for (var i = 0; i < rs.list.length; i++) {
                                        //包装行数据
                                        var rowData = self.RowData(i + 1, rs.list[i].resourceId, rs.list[i].permission);
                                        // 将行数据放到数组里
                                        rowsData.push(rowData);
                                    }
                                    tableData.data = rowsData;
                                    tableData.recordsTotal = rs.total;
                                    tableData.recordsFiltered = rs.total;
                                    callback(tableData);
                                },
                                error: function (data) {
                                    layer.alert(data.responseText, {icon: 0});
                                }
                            });
                        },
                        "columns": [ //定义行数据字段
                            {data: 'id', name: "resource_id", sortable: true},
                            {data: 'permission', name: "permission", sortable: true},
                            {data: 'operate', width: '80px', sortable: false}
                        ]
                    });
                },
                initRoles: function () {
                    var self = this;
                    $.ajax({
                        url: "/api/roles",
                        type: "get",
                        success: function (rs) {
                            self.allRoles = rs;
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    });
                },
                initModuleAdd: function () {
                    this.resource = {
                        id: "",
                        permission: "",
                        roles: [],
                    }
                },
                insertModule: function () {
                    var self = this;
                    if (self.resource.roles != null) {
                        self.resource.roles = self.resource.roles.map(item => {
                            var role = {};
                            role.roleId = item;
                            return role;
                        });
                    }
                    $.ajax({
                        url: "/api/resource",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.resource),
                        success: function (rs) {
                            if (rs.status === 200) {
                                self.initTable(self.pageSize);
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    });
                },
                initEditModal: function (id) {
                    var self = this;
                    $.ajax({
                        url: "/api/resource/" + id,
                        type: "get",
                        success: function (rs) {
                            rs.roles = rs.roles.map(item => item.roleId);
                            self.resource = rs;
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    });
                },
                updateModule: function () {
                    var self = this;
                    self.resource.roles = self.resource.roles.map(item => {
                        var role = {};
                        role.roleId = item;
                        return role;
                    });

                    $.ajax({
                        url: "/api/resource",
                        type: "put",
                        contentType: "application/json",
                        data: JSON.stringify(self.resource),
                        success: function (rs) {
                            if (rs.status === 200) {
                                self.initTable(self.pageSize);
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    });
                },
                deleteModule: function (id) {
                    var self = this;
                    bootbox.confirm({
                        message: "确认删除？",
                        buttons: {
                            confirm: {
                                label: "确定"
                            },
                            cancel: {
                                label: "取消"
                            }
                        },
                        callback: function (result) {
                            if (result) {
                                $.ajax({
                                    url: "/api/resource/" + id,
                                    type: "delete",
                                    success: function (rs) {
                                        if (rs.status === 200) {
                                            self.initTable(self.pageSize);
                                        } else {
                                            layer.alert(rs.message, {icon: 0});
                                        }
                                    },
                                    error: function (rs) {
                                        layer.alert(rs.responseText, {icon: 0});
                                    }
                                });
                            }
                        }
                    })
                }
            },
            created: function () {
                window.initEditModal = this.initEditModal;
                window.deleteModule = this.deleteModule;
                window.initModuleAdd = this.initModuleAdd;
            },
            mounted: function () {
                this.initTable(this.pageSize);
                this.initRoles();
            }
        });

    </script>
